﻿@import "_reset.less";

body {
  background : #000;
}

#loading {
  position   : fixed;
  z-index    : 999999;
  left       : 0;
  right      : 0;
  top        : 0;
  bottom     : 0;
  background : #000;

  .tip {
    position    : absolute;
    width       : 100%;
    height      : 0;
    left        : 0;
    top         : 50%;
    margin-top  : -12px;
    font-size   : 24px;
    color       : #fff;
    text-align  : center;
  }
}

@-webkit-keyframes heart {
  0%   { -webkit-transform : scale(1, 1); }
  10%  { -webkit-transform : scale(1.1, 1.1); }
  20%  { -webkit-transform : scale(1, 1); }
  30%  { -webkit-transform : scale(1.1, 1.1); }
  40%  { -webkit-transform : scale(1, 1); }
  100% { -webkit-transform : scale(1, 1); }
}

@-webkit-keyframes bigheart {
  0%   { -webkit-transform : scale(1, 1); }
  10%  { -webkit-transform : scale(1.4, 1.4); }
  20%  { -webkit-transform : scale(1, 1); }
  30%  { -webkit-transform : scale(1.4, 1.4); }
  40%  { -webkit-transform : scale(1, 1); }
  100% { -webkit-transform : scale(1, 1); }
}

@-webkit-keyframes shake {
  0% { -webkit-transform : translateY(0px); }
  5% { -webkit-transform : translateY(3px); }
  10% { -webkit-transform : translateY(0px); }
  15% { -webkit-transform : translateY(-3px); }
  3% { -webkit-transform : translateY(0px); }
  35% { -webkit-transform : translateY(3px); }
  40% { -webkit-transform : translateY(0px); }
  45% { -webkit-transform : translateY(-3px); }
  50% { -webkit-transform : translateY(0px); }
  55% { -webkit-transform : translateY(3px); }
  60% { -webkit-transform : translateY(0px); }
  65% { -webkit-transform : translateY(-3px); }
  70% { -webkit-transform : translateY(0px); }
  100% { -webkit-transform : translateY(0px); }
}

.page {
  overflow : hidden;
  position : fixed;
  left     : 0;
  right    : 0;
  top      : 0;
  bottom   : 0;
  background-size     : 100% auto !important;
  background-repeat   : no-repeat !important;
  background-position : center top !important;
}

.page-home {
  z-index : 100;
  background : url(../img/home-bg.jpg);

  .btn {
    position : absolute;
    width    : 320px;
    height   : 100px;
    left     : 50%;
    top      : 700px;
  }

  .enter-btn {
    margin-left : -320px;
  }
  .confirm-btn {
    margin-left : 0px;
  }
}

.page-confirm {
  z-index : 90;
  background : url(../img/confirm-bg.jpg);

  .enter-btn {
    position    : absolute;
    width       : 640px;
    height      : 100px;
    left        : 50%;
    top         : 670px;
    margin-left : -320px;
  }
}

.page-enter {
  z-index : 80;
  background : url(../img/enter-bg.jpg);

  .select-btn {
    position    : absolute;
    width       : 640px;
    height      : 100px;
    left        : 50%;
    top         : 670px;
    margin-left : -320px;
  }
}

.page-select {
  z-index : 70;
  background : url(../img/select-bg.jpg);

  .btn {
    position : absolute;
    width    : 184px;
    height   : 63px;
    left     : 50%;

    .dot {
      box-sizing: border-box;
      position: absolute;
      width: 20px;
      height: 20px;
      background: #fe4b3c;
      border: 5px solid #fbf9f4;
      border-radius: 10px;
    }
  }

  .bi-btn {
    top         : 260px;
    margin-left : 120px;
    background  : url(../img/select-bi.png);
    -webkit-transition : all 0.4s;
    -webkit-transform-origin : left center;

    .dot {
      left : 2px;
      top  : 13px;
    }
  }
  .yao-btn {
    top         : 405px;
    margin-left : -265px;
    background  : url(../img/select-yao.png);
    -webkit-transform-origin : right center;
    -webkit-transition : all 0.4s 0.2s;

    .dot {
      left : 164px;
      top  : 13px;
    }
  }
  .tui-btn {
    top         : 450px;
    margin-left : 55px;
    background  : url(../img/select-tui.png);
    -webkit-transform-origin : left center;
    -webkit-transition : all 0.4s 0.4s;

    .dot {
      left : 0px;
      top  : 13px;
    }
  }

  .btn {
    opacity : 0.01;
    -webkit-transform : scale(0.1, 0.1);
  }
  &.active .btn {
    opacity : 1;
    -webkit-transform : scale(1, 1);
  }

  &.active .dot {
    -webkit-animation : bigheart 1.5s infinite;
  }
}

.page-action {
  z-index : 60;
  background : url(../img/action-bg.jpg);

  .show {
    position    : absolute;
    width       : 550px;
    height      : 350px;
    left        : 50%;
    top         : 270px;
    margin-left : -290px;
  }

  .type1 {
    background : url(../img/bi.png) 0 0;
    -webkit-animation : bi 2s steps(5, start) infinite;
  }

  @-webkit-keyframes bi {
    to {
      background-position : 0px -1750px;
      -webkit-transform   : translate3d(0, 0, 0);
    }
  }

  .type2 {
    background : url(../img/yao.png) 0 0;
    -webkit-animation : yao 3s steps(12, start) infinite;
  }

  @-webkit-keyframes yao {
    to {
      background-position : 0px -4200px;
      -webkit-transform   : translate3d(0, 0, 0);
    }
  }

  .type3 {
    background : url(../img/tui.png) 0 0;
    -webkit-animation : tui 3s steps(7, start) infinite;
  }

  @-webkit-keyframes tui {
    to {
      background-position : 0px -2450px;
      -webkit-transform   : translate3d(0, 0, 0);
    }
  }

  .back-btn {
    position    : absolute;
    width       : 120px;
    height      : 85px;
    left        : 50%;
    top         : 554px;
    margin-left : 190px;
  }

  .act-btn {
    position : absolute;
    width    : 201px;
    height   : 93px;
    left     : 50%;
    top      : 670px;
  }

  .act-btn1 {
    margin-left : -310px;
    background  : url(../img/action-point-1-act.png);
    &.active {
      opacity: 0.01;
      -webkit-transform : scale(2, 2);
      -webkit-transition : all 0.5s;
    }
  }
  .act-btn2 {
    margin-left : -100px;
    background  : url(../img/action-point-2-act.png);
    &.active {
      opacity: 0.01;
      -webkit-transform : scale(2, 2);
      -webkit-transition : all 0.5s;
    }
  }
  .act-btn3 {
    margin-left : 110px;
    background  : url(../img/action-point-3-act.png);
    &.active {
      opacity: 0.01;
      -webkit-transform : scale(2, 2);
      -webkit-transition : all 0.5s;
    }
  }
}

.page-shake {
  z-index : 50;
  background : url(../img/shake-bg.jpg);

  .shake-icon {
    position    : absolute;
    width       : 93px;
    height      : 97px;
    left        : 50%;
    top         : 670px;
    margin-left : -280px;
    background  : url(../img/shake-shake.png);
  }

  &.active .shake-icon {
    -webkit-animation : shake 1.5s infinite;
  }
}

.page-download {
  z-index : 40;
  background : url(../img/download-bg.jpg);

  .btn {
    position    : absolute;
    width       : 450px;
    height      : 100px;
    left        : 50%;
    top         : 670px;
    margin-left : -225px;
  }

  .price-tip {
    position    : absolute;
    width       : 155px;
    height      : 134px;
    left        : 50%;
    top         : 485px;
    margin-left : 105px;
    background  : url(../img/download-price.png);
  }

  &.active .price-tip {
    -webkit-animation : heart 2s infinite;
  }
}

.pop {
  overflow   : hidden;
  display    : none;
  position   : fixed;
  z-index    : 10000;
  left       : 0;
  right      : 0;
  top        : 0;
  bottom     : 0;
  background : rgba(0, 0, 0, 0.8);

  .window {
    position    : absolute;
    width       : 640px;
    height      : 580px;
    top         : 50px;
    left        : 50%;
    margin-left : -320px;
  }

  .close-btn {
    position : absolute;
    width    : 70px;
    height   : 70px;
    top      : 35px;
    right    : 50px;
  }

  .go-btn {
    position    : absolute;
    width       : 330px;
    height      : 110px;
    left        : 50%;
    top         : 255px;
    margin-left : -165px;
  }
}

.pop-enter .window {
  background : url(../img/pop-enter.png);
}
.pop-sent .window {
  background : url(../img/pop-sent.png);
}

.pop-lingjiang {

  .window {
    background : url(../img/pop-xianjin.png);
  }

  .get-verify-btn, .submit-btn {
    position    : absolute;
    width       : 170px;
    height      : 70px;
    left        : 50%;
    margin-left : 83px;
  }

  .get-verify-btn {
    top : 245px;
  }
  .submit-btn {
    top : 324px;
  }

  .reject-btn {
    position    : absolute;
    width       : 200px;
    height      : 90px;
    left        : 50%;
    top         : 425px;
    margin-left : -100px;
  }

  input {
    display     : block;
    position    : absolute;
    width       : 250px;
    height      : 40px;
    left        : 50%;
    margin      : 0;
    padding     : 0;
    margin-left : -199px;
    font-size   : 24px;
    color       : #b29d9d;
    line-height : 100%;
    font-weight : bold;
    text-align  : left;
    border      : 0;
    outline     : 0;
    background  : none;

    &::-webkit-input-placeholder {
      color : #b29d9d;
      font-weight : bold;
    }
  }

  .phone-num {
    top : 261px;
  }
  .verify-code {
    top : 338px;
  }
}

